<template>
  <!-- 财务统计--收款统计 -->
  <div class="item">
    <div class="titleBox">
      <div class="dot"></div>
      <p class="name">收款统计</p>
    </div>
    <div class="content">
      <div class="countBox">
        <div class="countItem">
          <p class="name">本月应收（元）</p>
          <p class="num" style="color: #0e46d7">
            {{ countData.planMonthMoney ?? 0 }}
          </p>
        </div>
        <div class="countItem">
          <p class="name">本月实收（元）</p>
          <p class="num" style="color: #2fcc71">
            {{ countData.customerPaymentMonthMoney ?? 0 }}
          </p>
        </div>
      </div>
      <div class="charts">
        <scEcharts height="300px" :option="option"></scEcharts>
      </div>
    </div>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
import * as echarts from 'echarts'
export default {
  name: 'returnMoney',
  components: {
    scEcharts
  },
  data () {
    return {
      option: {
        // title: [{
        //   text: '收款进度',
        //   x: 'center',
        //   top: '55%',
        //   textStyle: {
        //     color: '#999',
        //     fontSize: 14,
        //     fontWeight: '100',
        //   }
        // }, {
        //   text: '0%',
        //   x: 'center',
        //   top: '38%',
        //   textStyle: {
        //     fontSize: 32,
        //     color: '#FFA846',
        //     foontWeight: '600',
        //   },
        // }],
        title: {
          text: `{a|0%}\n{b|收款进度}`,
          x: 'center',
          y: 'center',
          textStyle: {

            rich: {
              a: {
                fontSize: 32,
                fontWeight: 'bold',
                color: '#FFA846',
                padding: [0, 0, 14, 0]
              },
              b: {
                color: '#999',
                fontSize: 14,
              },
            }
          }
        },
        polar: {
          radius: ['58%', '70%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 80,
            showBackground: true,
            backgroundStyle: {
              color: '#f4f8ff',
            },
            data: [],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#2D69FF',
                  },
                  {
                    offset: 1,
                    color: '#C77DFF',
                  },
                  ]
                },
              },
            },
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            // radius: ['58%'],
            radius: ['55%', '58%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#C77DFF'
                  },
                  {
                    offset: 0.5,
                    color: '#2D69FF',
                  },
                  {
                    offset: 1,
                    color: '#A2E9FF',
                  }
                  ],
                }
              }
            },
            label: {
              show: false
            },
            data: [100],
          }
        ],

      }
    }
  },
  props: {
    countData: {
      type: Object, default: () => { }
    }
  },
  watch: {
    countData (newVal) {
      if (newVal) {
        let value = 0
        if (newVal.planMonthMoney != 0) {
          value = ((newVal.customerPaymentMonthMoney / newVal.planMonthMoney) * 100).toFixed(1)
        }

        this.option.title.text = `{a|${value}%}\n{b|收款进度}`
        this.option.series[0].data = [value]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  padding: 20px;
  flex-basis: calc(100% / 2);
  // min-width: 600px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .dot {
    display: inline-block;
    width: 6px;
    height: 16px;
    vertical-align: middle;
    background: #1481f4;
  }
  .name {
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    vertical-align: middle;
  }
  .content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .countBox {
    width: 40%;
    min-width: 300px;
    margin-top: 20px;
  }
  .countItem {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    margin-left: 60px;
    .name {
      margin-right: 10px;
      font-size: 16px;
      color: #666;
      white-space: nowrap;
    }
    .num {
      font-weight: 600;
      font-size: 28px;
    }
  }
  .charts {
    width: 60%;
    min-width: 300px;
  }
}
</style>